 
<template>
  <el-container>

    <el-header style="text-align: center; font-size: 30px">吉玛基因 oligo订购单</el-header>

    <el-main>
    
    <el-form class="small-space" :model="tempOrder" ref="dynamicValidateOligo" :rules="rules" v-loading.body="listLoading" label-order="left" label-width="150px">
      <el-row class="infor_bg">
        <el-col :span="12">
          <el-form-item label="订购日期" prop="tempTime" :editable="false" readonly="true" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">

<<<<<<< HEAD
            <el-date-picker v-model="tempOrder.tempTime" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions" style='width:450px;'>
=======
            <el-date-picker v-model="tempOrder.tempTime" type="datetime" :disabled = "enabletempTime" placeholder="选择日期时间" align="right" style='width:450px;'>
>>>>>>> develop
            </el-date-picker>
            
          </el-form-item>
          <el-form-item label="客户姓名" prop="client_name" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
<<<<<<< HEAD
            <el-input type="text" v-model="tempOrder.client_name" style='width:450px;'></el-input>
          </el-form-item>
          <el-form-item label="导师/管家姓名" prop="manager_name" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" v-model="tempOrder.manager_name" style='width:450px;'></el-input>
          </el-form-item>
          <el-form-item label="客户单位" prop="client_affiliation" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" v-model="tempOrder.client_affiliation" style='width:450px;'></el-input>
          </el-form-item>
          <el-form-item label="送货地址" prop="shipping_address" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" placeholder="务必详细准确，如**市**区****路****号***室" v-model="tempOrder.shipping_address" style='width:450px;'></el-input>
          </el-form-item>
          <el-form-item label="邮编" prop="postal_code" v-if="dialogStatus=='create' | dialogStatus=='update'">
            <el-input type="text" maxlength="6" v-model="tempOrder.postal_code" style='width:450px;'></el-input>
          </el-form-item>
          <el-form-item label="发票抬头" prop="invoice_title" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" placeholder="预付款客户不用填写发票抬头，但在此注明导师姓名" v-model="tempOrder.invoice_title" style='width:450px;'></el-input>
          </el-form-item>
           <el-form-item label="开票形式" prop="form_of_invoice" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" placeholder="请确定发票抬头，发票丢失不能重开，次月不能退换，一个月内付款" v-model="tempOrder.form_of_invoice" style='width:450px;'></el-input>
          </el-form-item>
          <el-form-item label="固定电话/导师电话" prop="telephone" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" v-model="tempOrder.telephone" style='width:450px;'></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="client_phone" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" v-model="tempOrder.client_phone" style='width:450px;'></el-input>
=======
            <el-input type="text" v-model="tempOrder.client_name" style='width:450px;' :readonly = "enableClientName"></el-input>
          </el-form-item>
          <el-form-item label="导师/管家姓名" prop="manager_name" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" v-model="tempOrder.manager_name" style='width:450px;' :readonly = "enableManaName"></el-input>
          </el-form-item>
          <el-form-item label="客户单位" prop="client_affiliation" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" v-model="tempOrder.client_affiliation" style='width:450px;' :readonly = "enableClientAffil"></el-input>
          </el-form-item>
          <el-form-item label="送货地址" prop="shipping_address" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" placeholder="务必详细准确，如**市**区****路****号***室" :readonly = "enableShippingAddress" v-model="tempOrder.shipping_address" style='width:450px;'></el-input>
          </el-form-item>
          <el-form-item label="邮编" prop="postal_code" v-if="dialogStatus=='create' | dialogStatus=='update'">
            <el-input type="text" maxlength="6" v-model="tempOrder.postal_code" style='width:450px;' :readonly = "enablePostal"></el-input>
          </el-form-item>
          <el-form-item label="发票抬头" prop="invoice_title" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" placeholder="预付款客户不用填写发票抬头，但在此注明导师姓名" :readonly = "enableInvoiceTitle" v-model="tempOrder.invoice_title" style='width:450px;'></el-input>
          </el-form-item>
           <el-form-item label="开票形式" prop="form_of_invoice" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" placeholder="请确定发票抬头，发票丢失不能重开，次月不能退换，一个月内付款" :readonly = "enableFormInvoice" v-model="tempOrder.form_of_invoice" style='width:450px;'></el-input>
          </el-form-item>
          <el-form-item label="固定电话/导师电话" prop="telephone" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" v-model="tempOrder.telephone" style='width:450px;' :readonly = "enableTelephone"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="client_phone" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" v-model="tempOrder.client_phone" style='width:450px;' :readonly = "enableClientPhone"></el-input>
>>>>>>> develop
          </el-form-item>

          </el-col>

          <el-col :span="12">
          
          <el-form-item label="电子邮箱" prop="client_email" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
<<<<<<< HEAD
            <el-input type="text" v-model="tempOrder.client_email" style='width:400px;'></el-input>
          </el-form-item>
          <el-form-item label="销售经理" prop="sales_manager_id" v-if="dialogStatus=='create' | dialogStatus=='update'">
            <el-input type="text" v-model="tempOrder.sales_manager_id" style='width:400px;'></el-input>
          </el-form-item>
          <el-form-item label="订单金额" prop="order_price" v-if="dialogStatus=='create' | dialogStatus=='update'">
            <el-input type="text" v-model="tempOrder.order_price" style='width:400px;'></el-input>
          </el-form-item>
          <el-form-item label="快递公司" prop="courier_scervices_company" v-if="dialogStatus=='create' | dialogStatus=='update'">
            <el-input type="text" v-model="tempOrder.courier_scervices_company" style='width:400px;'></el-input>
=======
            <el-input type="text" v-model="tempOrder.client_email" style='width:400px;' :readonly = "enableEmail"></el-input>
          </el-form-item>
          <el-form-item label="销售经理" prop="sales_manager_name" v-if="dialogStatus=='create' | dialogStatus=='update'">
            <el-autocomplete class="inline-input" placeholder="请搜索并选择" :disabled = "enableSalesManaName" v-model="tempOrder.sales_manager_name" :fetch-suggestions="querySearch" @select="handleSelect" style='width:400px;'></el-autocomplete>
          </el-form-item>
          <el-form-item label="订单金额" prop="order_price" v-if="dialogStatus=='create' | dialogStatus=='update'">
            <el-input type="text" v-model="tempOrder.order_price" style='width:400px;' :readonly = "enableOrderPrice"></el-input>
          </el-form-item>
          <el-form-item label="快递公司" prop="courier_scervices_company" v-if="dialogStatus=='create' | dialogStatus=='update'">
            <el-input type="text" v-model="tempOrder.courier_scervices_company" style='width:400px;' :readonly = "enableCourier"></el-input>
>>>>>>> develop
          </el-form-item>

          <el-form-item label="预付款客户姓名" prop="advance_customer_name" v-if="dialogStatus=='create' | dialogStatus=='update'">
            <el-checkbox @change="isClientName"></el-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<<<<<<< HEAD
              <el-input type="text" v-model="tempOrder.advance_customer_name" style='width:355px;' :disabled="enableClientName"></el-input>
          </el-form-item>

          <!--<el-col>
            <div style="padding-left:7px;">
              <el-checkbox-button @change="isClientName">预付款客户姓名</el-checkbox-button>
              <el-input type="text" v-model="tempOrder.create_time" style='width:400px;' :disabled="enableClientName"></el-input>
            </div>
          </el-col>-->

          <el-form-item label="发货通知方式" prop="notification_of_delivery" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" placeholder="见下方" v-model="tempOrder.notification_of_delivery" style='width:400px;'></el-input>
=======
              <el-input type="text" v-model="tempOrder.advance_customer_name" style='width:355px;' :disabled = "enableAdvanCliName" :readonly = "enableAdvanClientName"></el-input>
          </el-form-item>

          <el-form-item label="发货通知方式" prop="notification_of_delivery" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" placeholder="见下方" v-model="tempOrder.notification_of_delivery" :readonly = "enableNotiDeli" style='width:400px;'></el-input>
>>>>>>> develop
          </el-form-item>

          <div class="infor">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1）上海、南京、浙江、安徽、云南、山东、福建、重庆、四川、贵州、西藏、陕西、甘肃、宁夏、新疆、青海、河南、山西、香港、澳门、台湾以及其他境外订货地区请联系上海公司
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话：021-51320195，021-51370738，021-51370739，4006900195
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;E-mail：order@genepharma.com (产品订购)
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;support@genepharma.com (技术支持)
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2）北京、河北、内蒙古、天津、武汉、江西、黑龙江、吉林、辽宁、湖北、湖南、广东、江苏（除南京）、广西、海南订货地区请联系苏州公司
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话：0512-86668828
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;E-mail：szorder@genepharma.com (产品订购)
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;szsupport@genepharma.com (技术支持)					
          </div>

        </el-col>
        </el-row>
        <br>

        
        <el-table :data="tempOrder.tableDatas" style="width: 100%" max-height="400" height="400" stripe border @selection-change="handleSelectionChange">

          <el-table-column type="selection" width="55" align="center"></el-table-column>

<<<<<<< HEAD
          <el-table-column label="目录号" width="100" align="center">
            <template slot-scope="scope">
              <div
                  :prop="'tableDatas.' + scope.$index + '.catalog_id'">
                  <el-input type="text"  v-model="scope.row.catalog_id"></el-input>
=======
          <el-table-column prop="catalog_id" label="目录号" width="100" align="center">
            <template slot-scope="scope">
              <div
                  :prop="'tableDatas.' + scope.$index + '.catalog_id'">
                  <el-input type="text"  v-model="scope.row.catalog_id" :readonly = "enableCatalogId"></el-input>
>>>>>>> develop
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="gene_name" label="基因名称（请注明物种信息）" width="150" align="center">
            <template slot-scope="scope">
<<<<<<< HEAD
              <div
                  :prop="'tableDatas.' + scope.$index + '.gene_name'">
                  <el-input type="text"  v-model="scope.row.gene_name" :maxlength="35"></el-input>
=======
              <div :prop="'tableDatas.' + scope.$index + '.gene_name'">
                  <!--<el-input type="text"  v-model="scope.row.gene_name" :maxlength="35" :readonly = "enableGeneName"></el-input>-->
                  <el-autocomplete class="inline-input" placeholder="请搜索并选择" :disabled = "enableGeneName" v-model="scope.row.gene_name" :fetch-suggestions="querySearchGeneName" @select="((item)=>handleSelectGeneName(scope.$index, scope.row, item))"></el-autocomplete>
>>>>>>> develop
              </div>
            </template>
          </el-table-column>

          <el-table-column label="序列" align="center">
            <el-table-column prop="sense_53" label="sense（5'-3'）" width="200" align="center">
              <template slot-scope="scope">
                <div
                  :prop="'tableDatas.' + scope.$index + '.sense_53'">
<<<<<<< HEAD
                  <el-input type="text"  v-model="scope.row.sense_53"></el-input>
=======
                  <el-input type="text"  v-model="scope.row.sense_53" :readonly = "enableSense"></el-input>
>>>>>>> develop
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="antisense_53" label="antisense（5'-3'）" width="200" align="center">
              <template slot-scope="scope">
                <div
                  :prop="'tableDatas.' + scope.$index + '.antisense_53'">
<<<<<<< HEAD
                  <el-input type="text"  v-model="scope.row.antisense_53"></el-input>
=======
                  <el-input type="text"  v-model="scope.row.antisense_53" :readonly = "enableAnti"></el-input>
>>>>>>> develop
                </div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column prop="synthetic_spec" label="合成规格（OD）" width="150" align="center">
            <template slot-scope="scope">
                <div
                  :prop="'tableDatas.' + scope.$index + '.synthetic_spec'">
<<<<<<< HEAD
                  <el-input type="text"  v-model="scope.row.synthetic_spec"></el-input>
=======
                  <el-input type="text"  v-model="scope.row.synthetic_spec" :readonly = "enableSynSpec"></el-input>
>>>>>>> develop
                </div>
            </template>
          </el-table-column>

          <el-table-column prop="div_tubes_number" label="分装管数" width="150" align="center">
            <template slot-scope="scope">
                <div
                  :prop="'tableDatas.' + scope.$index + '.div_tubes_number'">
<<<<<<< HEAD
                  <el-input type="text"  v-model="scope.row.div_tubes_number"></el-input>
=======
                  <el-input type="text"  v-model="scope.row.div_tubes_number" :readonly = "enableDivTubNum"></el-input>
>>>>>>> develop
                </div>
            </template>
          </el-table-column>

          <el-table-column prop="chemical_modification" label="化学修饰" width="150" align="center">
            <template slot-scope="scope">
                <div
                  :prop="'tableDatas.' + scope.$index + '.chemical_modification'">
                
<<<<<<< HEAD
                <el-select v-model="scope.row.chemical_modification" placeholder="请选择">
=======
                <el-select v-model="scope.row.chemical_modification" placeholder="请选择" :disabled = "enableCheModi">
>>>>>>> develop
                  <el-option v-for="item in chemicals" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                </div>
            </template>
          </el-table-column>

          <el-table-column prop="flu_labeling" label="荧光标记" width="150" align="center">
            <template slot-scope="scope">
              <div
                  :prop="'tableDatas.' + scope.$index + '.flu_labeling'">
<<<<<<< HEAD
                <el-select v-model="scope.row.flu_labeling" placeholder="请选择">
=======
                <el-select v-model="scope.row.flu_labeling" placeholder="请选择" :disabled = "enableFluLabel">
>>>>>>> develop
                  <el-option v-for="item in flus" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="special_modi" label="特殊修饰" width="150" align="center">
            <template slot-scope="scope">
              <div
                  :prop="'tableDatas.' + scope.$index + '.special_modi'">
<<<<<<< HEAD
                <el-select v-model="scope.row.special_modi" placeholder="请选择">
=======
                <el-select v-model="scope.row.special_modi" placeholder="请选择" :disabled = "enableSpecModi">
>>>>>>> develop
                  <el-option v-for="item in specials" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>

<<<<<<< HEAD
=======
          <el-table-column prop="item_numbers" label="数量" width="150" align="center">
            <template slot-scope="scope">
              <div
                  :prop="'tableDatas.' + scope.$index + '.item_numbers'">
                  <el-input type="text"  v-model="scope.row.item_numbers" :readonly = "enableItemNum"></el-input>
                </div>
            </template>
          </el-table-column>

          <el-table-column prop="item_unit" label="单位" width="150" align="center">
            <template slot-scope="scope">
              <div
                  :prop="'tableDatas.' + scope.$index + '.item_unit'">
                  <el-input type="text"  v-model="scope.row.item_unit" :readonly = "enableItemUnit"></el-input>
                </div>
            </template>
          </el-table-column>

>>>>>>> develop
          <el-table-column prop="special_instructions" label="特殊说明" width="150" align="center">
            <template slot-scope="scope">
              <div
                  :prop="'tableDatas.' + scope.$index + '.special_instructions'">
<<<<<<< HEAD
                  <el-input type="text"  v-model="scope.row.special_instructions"></el-input>
=======
                  <el-input type="text"  v-model="scope.row.special_instructions" :readonly = "enableSpecIns"></el-input>
>>>>>>> develop
                </div>
            </template>
          </el-table-column>

        </el-table>

        <div align="center">
<<<<<<< HEAD
            <el-button size="small" type="primary" @click="addRecord"> 添加行 </el-button>
=======
            <el-button size="small" type="primary" @click="addRecord" :disabled = "enableAdd"> 添加行 </el-button>
>>>>>>> develop
            <el-button size="small" type="primary" @click.prevent="deleteRecord" :disabled = "enableDelete"> 删除行 </el-button>
        </div>
        <br>

        <el-row :gutter="20">
          <el-col :span="2">
              <div style="font-size:20px; height:50px; text-align:center; line-height:50px;">备注</div>
          </el-col>
          <el-col :span="22">
<<<<<<< HEAD
            <el-input type="textarea" :rows="3" v-model="tempOrder.remark" v-if="dialogStatus=='create' | dialogStatus=='update'"></el-input>
=======
            <el-input type="textarea" :rows="3" v-model="tempOrder.remark" :readonly = "enableRemark" v-if="dialogStatus=='create' | dialogStatus=='update'"></el-input>
>>>>>>> develop
          </el-col>
        </el-row>
        <br>
        <el-row :gutter="20">
          <el-col :span="2">
              <div style="font-size:20px; height:220px; text-align:center; line-height:220px;">其他</div>
          </el-col>
          <el-col :span="22">
              <div style="border:dashed 1px black; font-size:15px; padding-left:10px;">
                <div>1.如果订购单链RNA，在特殊说明里注明单链。</div>
                <div>2.订购siRNA产品，19个碱基默认加TT，19个碱基以上如需加TT，请特殊说明。</div>
                <div>3.订购套餐请在特殊说明中注明。非套餐产品序列设计仅供参考，不保证有效。</div>
                <div>4.订购对照请把名称写入‘基因名称’写清规格即可。</div>
                <div>5.订购miRNA产品，请在特殊说明中标明您要订购的是过表达（mimics)还是敲除（inhibitor）,如果不进行标注，默认为是miRNA mimics。</div>
<<<<<<< HEAD
                <div>6.下单前请务必核对订购表客户信息和订购内容无误，我们将按照订购表上的内容生产、邮寄货物，开具发票！<br>
                      发送订单前请仔细核对，订单接收24小时后不能再修改或取消。</div>
                <div>7.订单发送后1个工作日内没有收到回复，请电话联系确认。请勿多次多头下单。若由此造成下单重复的，客户需自行承担责任，支付费用。<br>
                      需要报账用合同，或送货单、发票等特殊要求，请在下单时说明。否则您需承担因此产生的费用！</div>
=======
                <div>6.下单前请务必核对订购表客户信息和订购内容无误，我们将按照订购表上的内容生产、邮寄货物，开具发票！发送订单前请仔细核对，订单接收24小时后不能再修改或取消。</div>
                <div>7.订单发送后1个工作日内没有收到回复，请电话联系确认。请勿多次多头下单。若由此造成下单重复的，客户需自行承担责任，支付费用。需要报账用合同，或送货单、发票等特殊要求，请在下单时说明。否则您需承担因此产生的费用！</div>
>>>>>>> develop
              </div>
          </el-col>
        </el-row>
        <br><br>

        <div align="center">
<<<<<<< HEAD
      <el-button v-if="dialogStatus=='create'" type="success" @click="create_oligo" :disabled = "enableCreate">添 加</el-button>
      <el-button v-if="dialogStatus=='update'" type="primary" @click="update_oligo" :disabled = "enableUpdate">修 改</el-button>
      <el-button @click="resetForm('dynamicValidateOligo')">重 置</el-button>
=======
      <el-button v-if="dialogStatus=='create' & buttonStatus == 'create'" type="success" @click="create_oligo" :disabled = "enableCreate">添 加</el-button>
      <el-button v-if="dialogStatus=='update' & buttonStatus == 'update'" type="success" @click="update_oligo" :disabled = "enableUpdate">修 改</el-button>
      <el-button v-if="buttonStatus == 'print'" type="primary" >打 印</el-button>
      <el-button v-if="dialogStatus=='create' & buttonStatus == 'create'" @click="resetForm('dynamicValidateOligo')">重 置</el-button>
>>>>>>> develop
    </div>

    </el-form>
    
  </el-main>
  </el-container>
</template>


<script>
import {mapGetters} from 'vuex'
import {validator} from 'vee-validate'
import {isPhone, isClientName, isManagerName, isClientAff, isShippingAdd, isClientEMail, isInvoiceTitle,
 isFormInvoice, isTelephone, isSalesManager, isOrderPrice, isAdvanceCusName, isNotificationDeli, isPostalCode, isScervices_Company} from '../../validate'
export default {
  data() {

<<<<<<< HEAD
      // var check_client_name = (rule, value, callback) => {
      //     if (value === '') {
      //       callback(new Error('请输入客户姓名'));
      //     } else if(Number.isInteger(value)){
      //       callback(new Error('含有非法字符（只能输入字母、汉字）'))
      //     } else {
      //       callback();
      //     }
      // };

      return {
        dialogStatus: 'create',
        listLoading: false,     //数据加载等待动画
        enableClientName: true,

        enableCreate:false,
        enableUpdate:false,
=======
      return {
        dialogStatus: 'create',
        buttonStatus: 'create',
        listLoading: false,     //数据加载等待动画
        enableAdvanCliName:true,

        enableCreate:false,
        enableUpdate:false,
        enableAdd:false,
>>>>>>> develop
        enableDelete:true,

        chemicals: [{
          value: '选项1',
          label: "2'F修饰"
        }, {
          value: '选项2',
          label: "2'Ome修饰"
        }],
        chemical_value: '',

        flus: [{
          value: '选项1',
          label: "5'FAM"
        }, {
          value: '选项2',
          label: "5'CY3"
        }, {
          value: '选项3',
          label: "5'CY5"
        }, {
          value: '选项4',
          label: "3'FAM"
        }, {
          value: '选项5',
          label: "3'CY3"
        }],
        flu_value: '',

        specials: [{
          value: '选项1',
          label: "5'p"
        }, {
          value: '选项2',
          label: "5'NH2"
        }, {
          value: '选项3',
          label: "3'NH2"
        }, {
          value: '选项4',
          label: "5'Biotin"
        }, {
          value: '选项5',
          label: "硫代"
        }, {
          value: '选项6',
          label: "5'巯基"
        }, {
          value: '选项7',
          label: "5'Chol"
        }, {
          value: '选项8',
          label: "3'Chol"
        }, {
          value: '选项9',
          label: "3'BHQ-1"
        }, {
          value: '选项10',
          label: "3'Dabcyl"
        }, {
          value: '选项11',
          label: "C6 S-S修饰"
        }, {
          value: '选项12',
          label: "5-Me-dC修饰"
        }, {
          value: '选项13',
          label: "5'TET"
        }, {
          value: '选项14',
          label: "5'HEX"
        }, {
          value: '选项15',
          label: "3'Biotin"
        }],
        special_value: '',

        multipleSelection:[],
<<<<<<< HEAD
=======
        timeMember:"",
        salesList:[],
        geneNameList:[],
        productListQuery: {         //用于获取所有货品
          pageNum: 1, //页码
          pageRow: 5, //每页条数
          value: ""
        },

        enabletempTime : false,
        enableClientName: false,
        enableManaName:false,
        enableClientAffil:false,
        enableShippingAddress:false,
        enablePostal:false,
        enableInvoiceTitle:false,
        enableFormInvoice:false,
        enableTelephone:false,
        enableClientPhone:false,
        enableEmail:false,
        enableSalesManaName:false,
        enableOrderPrice:false,
        enableCourier:false,
        enableAdvanClientName:false,
        enableNotiDeli:false,
        enableCatalogId:false,
        enableGeneName:false,
        enableSense:false,
        enableAnti:false,
        enableSynSpec:false,
        enableDivTubNum:false,
        enableCheModi:false,
        enableFluLabel:false,
        enableSpecModi:false,
        enableItemNum:false,
        enableItemUnit:false,
        enableSpecIns:false,
        enableRemark : false,
>>>>>>> develop

        tempOrder:{
          id: "",
          order_id: "",
          mord_id: "",
          tempTime:'',
          create_time: "",
          client_name: "",
          manager_name: "",
          client_affiliation: "",
          shipping_address: "",
          postal_code:"",
          invoice_title: "",
          form_of_invoice: "",
          telephone: "",
          client_phone: "",
          client_email: "",
          notification_of_delivery: "",
          order_price:"",
          order_type:"RNA oligo",
<<<<<<< HEAD
=======
          sales_manager_name:"",
>>>>>>> develop
          sales_manager_id:"",
          advance_customer_name:"",
          courier_scervices_company:"",
          remark:"",

          tableDatas: [{
          catalog_id:"",
          gene_name:"",
<<<<<<< HEAD
=======
          gene_name_id:"",
>>>>>>> develop
          sense_53:"",
          antisense_53:"",
          synthetic_spec:"",
          div_tubes_number:"",
          chemical_modification:"",
          flu_labeling:"",
          special_modi:"",
<<<<<<< HEAD
=======
          item_numbers:"",
          item_unit:"",
>>>>>>> develop
          special_instructions:""
        }]

        },

        rules:{
          tempTime:[
<<<<<<< HEAD
            {type: 'date', required: true, message: '请输入订购日期', trigger: 'blur'}
=======
            {type: 'date', required: true, message: '请输入订购日期', trigger: 'change'}
>>>>>>> develop
          ],
          client_name:[
            {validator: isClientName, trigger: 'blur' }
          ],
          manager_name:[
            {validator: isManagerName, trigger: 'blur' }
          ],
          client_affiliation:[
            {validator: isClientAff, trigger: 'blur' }
          ],
          shipping_address:[
            {validator: isShippingAdd, trigger: 'blur' }
          ],
          postal_code:[
            { validator: isPostalCode, required: false, trigger: 'change' }
          ],
          invoice_title:[
            {validator: isInvoiceTitle, trigger: 'blur' }
          ],
          form_of_invoice:[
            {validator: isFormInvoice, trigger: 'blur' }
          ],
          telephone:[
            {validator: isTelephone, trigger: 'blur' }
          ],
          client_phone:[
            {validator: isPhone, trigger: 'blur' }
          ],
          client_email:[
            {validator: isClientEMail, trigger: 'blur' }
          ],
<<<<<<< HEAD
          sales_manager_id:[
=======
          sales_manager_name:[
>>>>>>> develop
            {validator: isSalesManager, required: false, trigger: 'change' }
          ],
          order_price:[
            {validator: isOrderPrice, required: false, trigger: 'change' }
          ],
          advance_customer_name:[
            {validator: isAdvanceCusName, required: false, trigger: 'change' }
          ],
          notification_of_delivery:[
            {validator: isNotificationDeli, trigger: 'blur' }
          ],
          courier_scervices_company:[
            {validator: isScervices_Company, required: false, trigger: 'blur' }
          ]
        },

<<<<<<< HEAD
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },

      }
=======
      }
  },

  created() {
    if (this.hasPerm('order:add') || this.hasPerm('order:update')) {
      
      //展示详情
      if(this.orderOperate === 'showDetails'){
        this.getOrderListById();
      }
      //创建
      if(this.orderOperate === 'createOrder'){
        this.showCreate();
      }
      //修改
      if(this.orderOperate === 'showUpdate'){
        this.showUpdate();
      }
    }
  },

  computed: {
    ...mapGetters([
      'order_id',
      'orderOperate'
    ]),
  },
  watch: {
    "order_id" : function(){
      if(this.order_id != ''){
        this.getOrderListById();
      }
    },
    "orderOperate" : function(){
      if(this.orderOperate === 'createOrder'){
        this.showCreate();
      }
      if(this.orderOperate === 'showUpdate'){
        this.showUpdate();
      }
      if(this.orderOperate === 'showDetails'){
        this.getOrderListById();
      }
    }
>>>>>>> develop
  },

  methods: {

<<<<<<< HEAD
    //判断是否选中预付款客户姓名
    isClientName(){
      if(this.enableClientName){
        this.enableClientName = false;
      }else{
        this.enableClientName = true;
=======
    tempOrderModel(val){
      this.tempOrder.order_id = val.order_id;
      this.tempOrder.client_name = val.client_name;
      
      this.tempOrder.manager_name = val.manager_name;
      this.tempOrder.client_affiliation = val.client_affiliation;
      this.tempOrder.shipping_address = val.shipping_address;
      this.tempOrder.invoice_title = val.invoice_title;
      this.tempOrder.form_of_invoice = val.form_of_invoice;
      this.tempOrder.telephone = val.telephone;
      this.tempOrder.client_phone = val.client_phone;
      this.tempOrder.client_email = val.client_email;
      this.tempOrder.notification_of_delivery = val.notification_of_delivery;

      this.tempOrder.postal_code = val.postal_code;
      this.tempOrder.sales_manager_name = val.username;
      this.tempOrder.sales_manager_id = val.sales_manager_id;
      this.tempOrder.order_price = val.order_price;
      this.tempOrder.courier_scervices_company = val.courier_scervices_company;
      this.tempOrder.advance_customer_name = val.advance_customer_name;
      this.tempOrder.remark = val.remark;
    },

    tempOrderTableModel(val, index){
      this.tempOrder.tableDatas[index].catalog_id = val.catalog_id;
      this.tempOrder.tableDatas[index].gene_name = val.gene_name;
      this.tempOrder.tableDatas[index].gene_name_id = val.sc_item_id;
      this.tempOrder.tableDatas[index].sense_53 = val.sense_53;
      this.tempOrder.tableDatas[index].antisense_53 = val.antisense_53;
      this.tempOrder.tableDatas[index].synthetic_spec = val.synthetic_spec;
      this.tempOrder.tableDatas[index].div_tubes_number = val.div_tubes_number;
      this.tempOrder.tableDatas[index].chemical_modification = val.chemical_modification;
      this.tempOrder.tableDatas[index].flu_labeling = val.flu_labeling;
      this.tempOrder.tableDatas[index].special_modi = val.special_modi;
      this.tempOrder.tableDatas[index].item_numbers = val.item_numbers;
      this.tempOrder.tableDatas[index].item_unit = val.item_unit;
      this.tempOrder.tableDatas[index].special_instructions = val.special_instructions;
    },

    enableAll(flag){
      
      this.enableClientName = flag;
      this.enableManaName = flag;
      this.enableClientAffil = flag;
      this.enableShippingAddress = flag;
      this.enablePostal = flag;
      this.enableInvoiceTitle = flag;
      this.enableFormInvoice = flag;
      this.enableTelephone = flag;
      this.enableClientPhone = flag;
      this.enableEmail = flag;
      this.enableSalesManaName = flag;
      this.enableOrderPrice = flag;
      this.enableCourier = flag;
      this.enableAdvanClientName = flag;
      this.enableNotiDeli = flag;
      this.enableCatalogId = flag;
      this.enableGeneName = flag;
      this.enableSense = flag;
      this.enableAnti = flag;
      this.enableSynSpec = flag;
      this.enableDivTubNum = flag;
      this.enableCheModi = flag;
      this.enableFluLabel = flag;
      this.enableSpecModi = flag;
      this.enableItemNum = flag;
      this.enableItemUnit = flag;
      this.enableSpecIns = flag;
      this.enableRemark = flag;
    },

    //根据子订单编号获取相应信息
    getOrderListById(){
      this.tempOrder.order_id = this.order_id;
      this.tempOrder.mord_id = this.order_id.split('-')[0]
      // alert("order : " + this.order_id.split('-')[0])

      this.api({
          url: "/order/getRNAOligoByID",
          method: "get",
          params: this.tempOrder.mord_id
      }).then(data => {
        
        console.log("this.multipleSelection.length: " + this.multipleSelection.length);

        for(let i = 0; i < data.totalCount; i++) {
          if(i > 0){
            this.addRecord();
          }
          this.tempOrderTableModel(data.list[i], i);
        }
        // this.tempOrderTableModel(data.list[0], 0);
        this.tempOrderModel(data.list[0]);

        this.tempOrder.tempTime = data.list[0].create_time;   //创建时间
        this.enabletempTime = true;

        this.enableAll(true);

        this.enableAdd = true;
        this.enableDelete = true;

        this.buttonStatus = 'print';
      })
    },

    //获取所有的销售经理
    getAllSalesManager(){
        this.api({
          url: "/order/listSales",
          method: "get"
        }).then(data => {
          this.salesList = data.list;

          var json = JSON.parse(JSON.stringify(data.list).replace(/username/g,"value"));
          this.salesList = json;
        })
    },

    //获取所有的基因名称
    getAllGeneName(){
        this.api({
          url: "/products/listScItem",
          method: "get",
          params: this.productListQuery
        }).then(data => {
          //提供给实时搜索
          var json = JSON.parse(JSON.stringify(data.list).replace(/sc_item_name/g,"value"));
          this.geneNameList = json;
        })
    },

    //创建RNA oligo订单
    showCreate(){

      this.getAllSalesManager();
      this.getAllGeneName();
      
      this.resetForm('dynamicValidateOligo');

      this.enableAll(false);
      this.enabletempTime = false;    //创建时间

      this.enableAdd = false;

      this.dialogStatus = 'create';
      this.buttonStatus = 'create';

    },

    //修改RNA oligo订单
    showUpdate(){

      this.tempOrder.order_id = this.order_id;
      this.tempOrder.mord_id = this.order_id.split('-')[0]

      this.api({
          url: "/order/getRNAOligoByID",
          method: "get",
          params: this.tempOrder.mord_id
      }).then(data => {

          for(let i = 0; i < data.totalCount; i++) {
            if(data.list[i].order_id == this.order_id){
              this.tempOrderModel(data.list[i]);
              this.tempOrderTableModel(data.list[i], 0);
            }
          }

          this.getAllSalesManager();
          this.getAllGeneName();

          this.tempOrder.tempTime = '';   //创建时间
          this.enabletempTime = false;

          this.enableAll(false);

          this.enableAdd = true;
          this.dialogStatus ='update';
          this.buttonStatus = 'update';
      })

    },

    querySearch(queryString, cb) {
        var salesList = this.salesList;
        var results = queryString ? salesList.filter(this.createFilter(queryString)) : salesList;
        // 调用 callback 返回建议列表的数据
        cb(results);
    },
    createFilter(queryString) {
      return (salesList) => {
        return (salesList.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },

    handleSelect(item) {
      this.tempOrder.sales_manager_name = item.value;
      this.tempOrder.sales_manager_id = item.id;
    },

    querySearchGeneName(queryString, cb) {
        var geneNameList = this.geneNameList;
        var results = queryString ? geneNameList.filter(this.createFilterGeneName(queryString)) : geneNameList;
        // 调用 callback 返回建议列表的数据
        cb(results);
    },
    createFilterGeneName(queryString) {
      return (geneNameList) => {
        return (geneNameList.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },

    handleSelectGeneName(index, row, item) {
      this.tempOrder.tableDatas[index].gene_name = item.value;
      this.tempOrder.tableDatas[index].gene_name_id = item.sc_item_id;
    },

    //判断是否选中预付款客户姓名
    isClientName(){
      if(this.enableAdvanCliName){
        this.enableAdvanCliName = false;
      }else{
        this.enableAdvanCliName = true;
>>>>>>> develop
      }
    },

    //添加表格记录
    addRecord(){
      var newValue = {
          catalog_id:"",
          gene_name:"",
          sense_53:"",
          antisense_53:"",
          synthetic_spec:"",
          div_tubes_number:"",
          chemical_modification:"",
          flu_labeling:"",
          special_modi:"",
<<<<<<< HEAD
=======
          item_numbers:"",
          item_unit:"",
>>>>>>> develop
          special_instructions:"",
      };
      this.tempOrder.tableDatas.push(newValue);
    },

    handleSelectionChange(val){
      this.multipleSelection = val;
      if(this.multipleSelection.length != 0){
        this.enableDelete = false
      }else{
        this.enableDelete = true
      }
    },

    deleteRecord(){
      for(let i = 0; i < this.multipleSelection.length; i++){
        var index = this.tempOrder.tableDatas.indexOf(this.multipleSelection[i])
        if (index !== -1) {
          this.tempOrder.tableDatas.splice(index, 1)
        }
      }
      this.enableDelete = true
    },

    resetForm(formName){
      this.$refs[formName].resetFields();
<<<<<<< HEAD
    },

    pickerCalendarTime2DbTime(time){
        var d = new Date(time);
        var times=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
        return times;
=======
      // this.$refs.formName.resetFields();

      var lengths = this.tempOrder.tableDatas.length;

      if(lengths != 0){
        for (let i = 0; i < lengths; i++) {
          this.tempOrder.tableDatas[i].catalog_id = "";
          this.tempOrder.tableDatas[i].gene_name = "";
          this.tempOrder.tableDatas[i].sense_53 = "";
          this.tempOrder.tableDatas[i].antisense_53 = "";
          this.tempOrder.tableDatas[i].synthetic_spec = "";
          this.tempOrder.tableDatas[i].div_tubes_number = "";
          this.tempOrder.tableDatas[i].chemical_modification = "";
          this.tempOrder.tableDatas[i].flu_labeling = "";
          this.tempOrder.tableDatas[i].special_modi = "";
          this.tempOrder.tableDatas[i].item_numbers = "";
          this.tempOrder.tableDatas[i].item_unit = "";
          this.tempOrder.tableDatas[i].special_instructions = "";
        } 
      }
      this.tempOrder.remark = "";
    },

    pickerCalendarTime2DbTime(time){
      var d = new Date(time);
      var times=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
      return times;
>>>>>>> develop
    },

    create_oligo(){

      var lengths = this.tempOrder.tableDatas.length;

      if(lengths != 0){
        for (let i = 0; i < lengths; i++) {
          let obj1 = {}
          let obj2 = {}
          let obj3 = {}
          obj1 = this.chemicals.find((item) => {
          return item.value === this.tempOrder.tableDatas[i].chemical_modification;
          });
          obj2 = this.flus.find((item) => {
            return item.value === this.tempOrder.tableDatas[i].flu_labeling;
          });
          obj3 = this.specials.find((item) => {
            return item.value === this.tempOrder.tableDatas[i].special_modi;
          });

          if(obj1 != null){
            this.tempOrder.tableDatas[i].chemical_modification = obj1.label
          }
          if(obj2 != null){
            this.tempOrder.tableDatas[i].flu_labeling = obj2.label
          }
          if(obj3 != null){
            this.tempOrder.tableDatas[i].special_modi = obj3.label
          }
        }
<<<<<<< HEAD
        this.tempOrder.create_time = this.pickerCalendarTime2DbTime(this.tempOrder.tempTime);
=======
        if(this.timeMember != this.tempOrder.tempTime){
          this.tempOrder.create_time = this.pickerCalendarTime2DbTime(this.tempOrder.tempTime);
        }else{
          this.tempOrder.create_time = this.timeMember
        }
        // this.tempOrder.create_time = this.pickerCalendarTime2DbTime(this.tempOrder.tempTime);
>>>>>>> develop
      }

      this.$refs.dynamicValidateOligo.validate((valid) => {
        if (valid) {
            this.api({
              url: "/order/addOligo",
              method: "post",
              data: this.tempOrder
            }).then(() => {
              alert("添加oligo订购单完成！")
              this.dialogFormVisible = false
              this.resetForm('dynamicValidateOligo')
            })
        } else {
          alert("请输入完整的信息！");
        }
      });
    },

    update_oligo(){
<<<<<<< HEAD
      alert("update_oligo")
=======
      var lengths = this.tempOrder.tableDatas.length;

      if(lengths != 0){
        for (let i = 0; i < lengths; i++) {
          let obj1 = {}
          let obj2 = {}
          let obj3 = {}
          obj1 = this.chemicals.find((item) => {
          return item.value === this.tempOrder.tableDatas[i].chemical_modification;
          });
          obj2 = this.flus.find((item) => {
            return item.value === this.tempOrder.tableDatas[i].flu_labeling;
          });
          obj3 = this.specials.find((item) => {
            return item.value === this.tempOrder.tableDatas[i].special_modi;
          });

          if(obj1 != null){
            this.tempOrder.tableDatas[i].chemical_modification = obj1.label
          }
          if(obj2 != null){
            this.tempOrder.tableDatas[i].flu_labeling = obj2.label
          }
          if(obj3 != null){
            this.tempOrder.tableDatas[i].special_modi = obj3.label
          }
        }
        this.tempOrder.create_time = this.pickerCalendarTime2DbTime(this.tempOrder.tempTime);
      }

      this.$refs.dynamicValidateOligo.validate((valid) => {
        if (valid) {
            this.api({
              url: "/order/updateOligo",
              method: "post",
              data: this.tempOrder
            }).then(() => {
              alert("修改oligo订购单完成！")
              this.dialogFormVisible = false
              // this.resetForm('dynamicValidateOligo')
            })
        } else {
          alert("请输入完整的信息！");
        }
      });
>>>>>>> develop
    }

  },
}
</script>

<style>
  .infor_bg{
    background-color: #F2F6FC;
  }
  .infor{
    border:1px dashed;
    width:500px;
    margin-left:50px;
    padding:0px 5px 0px 5px;   
  }
</style>